<template>
  <view class="content">
    <!-- 列表 -->
    <view class="ui-list bg-white fz30" v-if="state.dataSource">
      <view class="item flex flex-y-center">
        <view class="flex1">头像</view>
        <image
          v-if="state.dataSource.avatar"
          class="avatar"
          :src="state.dataSource.avatar"
          mode="aspectFit"
        ></image>
        <image
          v-else
          class="avatar"
          src="../../static/logo.png"
          mode="aspectFit"
        ></image>
      </view>
      <view
        class="item flex flex-y-center"
        @click="popupShow(popupNicknameRef)"
      >
        <view class="flex1">昵称</view>
        {{ state.dataSource.wechatName }}
        <sw-icons
          class="ml10"
          icon="icon-arrow-right"
          color="#ccc"
          size="30"
        ></sw-icons>
      </view>
      <view class="item flex flex-y-center" @click="popupShow(popupPhoneRef)">
        <view class="flex1">手机号码</view>
        {{ state.dataSource.wechatMobile }}
        <sw-icons
          class="ml10"
          icon="icon-arrow-right"
          color="#ccc"
          size="30"
        ></sw-icons>
      </view>
    </view>

    <!-- 修改昵称弹窗 -->
    <uni-popup ref="popupNicknameRef" type="center">
      <view class="popup popup-phone bg-white">
        <sw-icons
          class="popup-close"
          @click="popupClose(popupNicknameRef)"
          color="#ccc"
          size="40"
          icon="icon-guanbi"
        >
        </sw-icons>
        <view class="tit fz36 t-c">修改昵称</view>
        <view class="item mt40">
          <input
            type="text"
            placeholder="请输入您的新昵称"
            maxlength="20"
            v-model="state.formData.nickName"
          />
        </view>
        <view class="btn-box mt50 flex t-c fz34">
          <button class="btn btn0 flex1" @click="popupClose(popupNicknameRef)">
            取消
          </button>
          <button
            class="btn btn0 flex1 main-theme-bgcolor fff"
            @click="onSure('nickName')"
            :disabled="state.isSend"
          >
            确定
          </button>
        </view>
      </view>
    </uni-popup>

    <!-- 修改手机号码弹窗 -->
    <uni-popup ref="popupPhoneRef" type="center">
      <view class="popup popup-phone bg-white">
        <sw-icons
          class="popup-close"
          @click="popupClose(popupPhoneRef)"
          color="#ccc"
          size="40"
          icon="icon-guanbi"
        >
        </sw-icons>
        <view class="tit fz36 t-c">修改手机号码</view>
        <view class="item mt40">
          <input
            type="number"
            placeholder="请输入您的手机号码"
            maxlength="11"
            v-model="state.formData.mobile"
          />
        </view>
        <view class="btn-box mt50 flex t-c fz34">
          <button class="btn btn0 flex1" @click="popupClose(popupPhoneRef)">
            取消
          </button>
          <button
            class="btn btn0 flex1 main-theme-bgcolor fff"
            @click="onSure('mobile')"
            :disabled="state.isSend"
          >
            确定
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { queryUserById, editUser } from "@/common/js/getData.js";

const { proxy } = getCurrentInstance();

const state = reactive({
  isSend: false,
  dataSource: {},
  formData: {
    mobile: "",
    nickName: "",
  },
});

const popupNicknameRef = ref(null);
const popupPhoneRef = ref(null);

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
  loadData();
});

// 获取数据
const loadData = (data) => {
  queryUserById({}, data).then((res) => {
    state.dataSource = res.result;
  });
};

// 恢复form数据
const resertForm = () => {
  state.formData = {
    mobile: "",
    nickName: "",
  };
};

//手机号码正则表达式验证
const checkPhone = (phone) => {
  if (!/^1\d{10}$/.test(phone)) {
    return false;
  }
  return true;
};

// 确定
const onSure = (key) => {
  if (state.isSend) {
    return;
  }
  const formdata = state.formData;
  let data = {};
  if (key === "nickName") {
    if (!formdata[key]) {
      uni.showToast({
        icon: "none",
        title: "请输入您的新昵称",
      });
      return;
    }
  } else {
    if (!formdata[key]) {
      uni.showToast({
        icon: "none",
        title: "请输入手机号",
      });
      return;
    } else if (!checkPhone(formdata[key])) {
      uni.showToast({
        icon: "none",
        title: "请输入正确手机号",
      });
      return;
    }
  }

  state.isSend = true;
  data[key] = formdata[key];
  editUser(data)
    .then((res) => {
      uni.showToast({
        icon: "success",
        title: res.message,
      });
      popupNicknameRef.value.close();
      popupPhoneRef.value.close();
      loadData({ hideLoad: true });
    })
    .finally(() => {
      state.isSend = false;
    });
};

// 展示弹窗
const popupShow = (name) => {
  name.open();
};

// 关闭弹窗
const popupClose = (name) => {
  resertForm();
  name.close();
};
</script>

<style lang="less" scoped>
// @import url('@/common/less/common.less');
.ui-list {
  margin: 30rpx;

  .item {
    padding: 30rpx;
    border-bottom: 2rpx solid #eee;

    &:last-of-type {
      border-bottom: none;
    }

    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }
  }
}
</style>
